<style scoped lang="sass">
    .el-upload-list{
        float:left;
    }
    .upload-box{
        width: 148px;
        height: 148px;
        float:left;
        /* margin-left:20px; */
    }
</style>
<template>
    <div class="clearfix">
        <ul class="el-upload-list el-upload-list--picture-card">
            <li 
                v-for="(item,i) in data"
                :tabindex="i" class="el-upload-list__item is-ready">
                <img :src="item | sourceUrl" alt="" class="el-upload-list__item-thumbnail">
                <a class="el-upload-list__item-name">
                    <i class="el-icon-document"></i>6.7.jpg
                </a>
                <label class="el-upload-list__item-status-label">
                    <i class="el-icon-upload-success el-icon-check"></i>
                </label>
                <i class="el-icon-close"></i>
                <i class="el-icon-close-tip">按 delete 键可删除</i>
                <el-progress v-if="percentageShow && i===data.length-1" type="circle" :percentage="percentage"></el-progress>
                <!---->
                <span class="el-upload-list__item-actions">
                    <span
                        @click="handlePictureCardPreview(i)" 
                        class="el-upload-list__item-preview">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                        v-if="!readonly" 
                        @click="handleRemove(i)" 
                        class="el-upload-list__item-delete">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </li>
        </ul>
        <div
            v-if="!readonly" 
            class="upload-box">
            <el-upload action="/bookMall-admin/api/common/upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
                :http-request="httpRequest" :show-file-list="false" name="myfile" :multiple="false">
                <i class="el-icon-plus"></i>
            </el-upload>
        </div>
        <div v-if="remark" style="clear:both;color:#f56c6c">{{remark}}</div>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl | sourceUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>

    export default {
        props: {
            data: {
                type: Array,
                default() {
                    return [
                    ]
                },
            },
            readonly:{
                type:Boolean,
                default:false,
            },
            beforeajax:{
                type:Function,
                default:()=>{}
            },
            afterajax:{
                type:Function,
                default:()=>{}
            },
            limit:{
                type:Number,
                default:0,
            },
            remark:{
                type:String,
                default:'',
            }
        },
        computed: {

        },
        watch: {

        },
        data() {
            return {
                percentageShow:false,
                percentage:0,
                dialogImageUrl:'',
                dialogVisible:false,
            }
        },
        methods: {
            handlePictureCardPreview(i){
                this.dialogImageUrl = this.data[i];
                this.dialogVisible = true;
            },
            handleRemove(i) {
                let list = JSON.parse(JSON.stringify(this.data));
                list.splice(i,1);
                this.$emit('update:data', list);
            },
            httpRequest(param) {
                //插入一张空白图片
                let list = JSON.parse(JSON.stringify(this.data));
                if(this.limit>0&&list.length>=this.limit){
                    popup.miss({content:'超过最大限制上传数量'});
                    return
                }
                list.push(URL.createObjectURL(dataURItoBlob('')))
                this.$emit('update:data', list);
                this.beforeajax();
                //进度条
                this.percentageShow = true;
                this.percentage = 0;

                //提交
                util.fileXHR({
                    url: param.action,
                    data: param.data,
                    filename: param.filename,
                    file: param.file,
                    xhr: (res => {
                        this.percentage = parseInt(res.toFixed(0))
                    }),
                    success: (data => {
                        this.percentageShow = false;
                        let list = JSON.parse(JSON.stringify(this.data));
                        list[list.length-1] = data.data;
                        this.$emit('update:data',list);
                        this.afterajax();
                    })
                })
            }
        }
    }

    function readFile(file) {
        return new Promise(resolve=>{
            var reader = new FileReader();
            reader.onload = function (e) {
                resolve(reader.result)
            }
            reader.readAsDataURL(file); // 读出 base64
        })
    }

    function dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1]);
        else
            byteString = unescape(base64Data.split(',')[1]);
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {
            type: mimeString
        });
    }
</script>